<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>分布式配置中心框架</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
</head>

<body>

<!-- 你的 HTML 代码 -->

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item layui-this"><a href="">分布式配置中心框架</a></li>
</ul>
<br>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
    getData();

    function getData() {
        $.get("configList", function (data, status) {
            var htmlStr = "";
            var myData = data.data;
            for (var i = 0; i < myData.length; i++) {
                htmlStr += "<tr>"
                var id = myData[i].id;
                var name = myData[i].name;
                var key = myData[i].key;
                var value = myData[i].value;
                htmlStr += "<td>" + id + "</td>" + "<td>" + name + "</td>" + "<td>" + key + "</td>" + "<td>" + value + "</td>" + '<td><a href="javascript:update(' + id + ')" class="layui-btn">修改</a></td>';
                htmlStr += "</tr>";
            }
            $("#data").html(htmlStr);
        });
    }

    function update(id) {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            layer.open({
                title: '提示',
                btn: ['确定修改'],
                yes: function (index, layero) {
                    var newValue = $("#newValue").val();
                    layer.close(index);
                    $.post("updateConfig", {id: id, value: newValue}, function (result) {
                        getData();
                    });
                },
                content: '<input type="text" id="newValue"  name="title" required  lay-verify="required" placeholder="请输入修改内容" autocomplete="off" class="layui-input">'
            });
        });
    }
</script>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="300">
        <col width="150">
    </colgroup>
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>key</th>
        <th>value</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="data">

    </tbody>
</table>
</body>
</html>